import axios from "axios";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { AddModule } from "../actions/UserActions";

const CreateModule = props => {
    return (
      <div className="popup-box">
        <div className="box">
          <span className="close-icon" onClick={props.handleClose}>x</span>
          {props.content}
        </div>
      </div>
    );
  };

export const Supervision = () => {
    const userId = window.localStorage.getItem("userId");
    const [supervisions, setSupervisions] = useState([]);
    const [popUp, setPopUp] = useState(false);
    const [code, setCode] = useState('');
    const [sem, setSem] = useState('');
    const [name, setName] = useState('');
    const navigate = useNavigate();

    //get modules supervised by userId
    useEffect(() => {
        axios({
            method: 'GET',
            headers: { "satoken": window.localStorage.getItem("satoken") },
            url: 'http://localhost:8080/supervision/staff/' + userId,
        })
        .then((res) => {
            setSupervisions(res.data['data']);
        })
    }, [userId]);

    // toggle module pop up form when clicked
    const togglePopUp = () => {
        setPopUp(!popUp);
    }

    // submit new module
    const handleSubmitModule = () => {
        if (code === '') { alert("Module Code required!"); return; }
        if (sem === '') { alert("Please select Semester!"); return; }
        if (name === '') { alert("Module Name required!"); return; }
        AddModule(code, sem, name); // both module and supervision are added here
    }

    // manage module
    const handleManageModule = (moduleId) => {
        navigate(`/staff/module/${moduleId}`);
    }

    return (
        <div className="moduleCard">
            <nav>
                <ul>
                {supervisions.map((item) => {
                    return (
                        <div id="moduleView" key={item.id}>
                            <li><b>{item.code}</b></li>
                            <li>{item.name}</li>
                            <li>{item.semester}</li>
                            <button onClick={() => handleManageModule(item.id)}>Manage</button>
                        </div>
                    )
                })}
                <button id="createModule" onClick={togglePopUp}>+ Create Module</button>
                {popUp && <CreateModule
                    content={
                    <>
                    <b>Create A Module</b>

                    <div>
                        <label htmlFor="code">Module Code:&nbsp; &nbsp; </label>
                        <input value={code} onChange={(e) => setCode(e.target.value)} type="code" placeholder="eg: CS1010" id="code" name="code" />
                    </div>
                    
                    <div>
                        <label htmlFor="sem">Semester:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>
                        <select value={sem} onChange={(e) => setSem(e.target.value)} type="sem" id="sem" name="sem">
                            <option></option>
                            <option>AY22/23 S2</option>
                            <option>AY23/24 S1</option>
                            <option>AY23/24 S2</option>
                        </select>
                    </div>
                    
                    <div>
                        <label htmlFor="name">Module Name:&nbsp; &nbsp;</label>
                        <input value={name} onChange={(e) => setName(e.target.value)} type="name" placeholder="eg: Programming Methodology" id="name" name="name" />
                    </div>

                    <div>
                        <button className="Button" onClick={handleSubmitModule}>Add Module</button>
                    </div> 
                    </>}
                    handleClose={togglePopUp}
                />}
                </ul>
            </nav>
        </div>
    )
}